<template>
  <view>
    <yy-paging
      v-model="dataList"
      class="backgroundImage"
      @query="queryList"
      @onRefresh="onRefresh"
      ref="paging"
      @scroll="scroll"
      :auto="false"
      :refresher-enabled="true"
    >
      <template #top>
        <u-navbar
          back-text="返回"
          :is-back="false"
          :background="{ backgroundColor: isScroll ? '#D1EFF0' : 'transparent' }"
          :border-bottom="false"
          :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        >
          <view class="flex justify-between px-5 w-full">
            <view class="size-[1.5rem] rounded-full relative" @click="goNotify">
              <image src="/static/dddr29.png" class="size-full" mode="aspectFill" />
              <view
                class="size-[.5rem] top absolute -top-[.125rem] -right-[.125rem] bg-red-600 rounded-full"
                v-if="Number(unread_num)"
              ></view>
            </view>

            <view class="size-[1.5rem] rounded-full" @click="vk.navigateTo('/pages/my/setUp')">
              <image src="/static/dddr34.png" class="size-full" mode="aspectFill" />
            </view>
          </view>
        </u-navbar>
      </template>
      <template #empty>
        <yy-empty></yy-empty>
      </template>
      <template #loadingMoreNoMore>
        <yy-nomore></yy-nomore>
      </template>
      <view class="flex flex-col gap-3 p-4">
        <!-- 头像 -->
        <view class="flex gap-3 justify-between">
          <view class="flex gap-3 items-center">
            <view class="size-[105rpx] rounded-full border border-white overflow-hidden flex-none">
              <u-image
                class="!size-full"
                shape="circle"
                @click="
                  previewPictures(
                    vk.vuex.get('$user.userInfo.avatar')
                      ? vk.myfn.handleImageUrl(vk.vuex.get('$user.userInfo.avatar'))
                      : '/static/dddr103.png'
                  )
                "
                :src="
                  vk.vuex.get('$user.userInfo.avatar')
                    ? vk.myfn.handleImageUrl(vk.vuex.get('$user.userInfo.avatar'))
                    : '/static/dddr103.png'
                "
              ></u-image>
            </view>
            <view class="flex flex-col">
              <view class="text-[1.125rem] text-[#000000] font-bold line-clamp-1">
                {{ vk.vuex.get('$user.userInfo.nickname') || '用户_NVHWE' }}
              </view>
              <view class="text-[.75rem] text-[#5C6068]"> ID：{{ vk.vuex.get('$user.userInfo.uid') || '' }} </view>
            </view>
          </view>
          <view class="flex flex-none gap-[.0625rem] items-center" @click="vk.navigateTo('/pages/my/editMy')">
            <text class="text-[.8125rem] text-[#5C6068]"> 编辑资料 </text>
            <!-- <image src="/static/dddr58.png" mode="aspectFill" class="size-3" /> -->
            <u-icon name="arrow-right" size="20" color="#919499"></u-icon>
          </view>
        </view>
        <!-- 简介 -->
        <view
          class="items-top flex gap-2"
          @click="vk.navigateTo('/pages/my/editDescription?nickname=' + vk.getVuex('$user.userInfo.motto'))"
        >
          <view class="text-[.8125rem] text-[#8E9299]" v-if="!vk.getVuex('$user.userInfo.motto')">
            点击添加钓鱼格言，让钓友秒懂你的‘渔’乐！
          </view>
          <view class="text-[.8125rem] text-[#8E9299]text-[.8125rem] text-[#161A24] line-clamp-2" v-else>
            {{ vk.getVuex('$user.userInfo.motto') }}
          </view>
          <image src="/static/dddr32.png" class="size-4 flex-none" mode="aspectFill" />
        </view>
        <!-- 性别 -->
        <view>
          <view
            class="text-[.625rem] text-[#8E9299] bg-white rounded-[.25rem] p-1 inline-flex"
            @click="vk.navigateTo('/pages/my/editMy')"
            v-if="!isItEmpty()"
          >
            + 性别、年龄、所在地区
          </view>
          <view class="flex gap-1 items-center" v-else>
            <view class="bg-[#FFFFFF] rounded-[.25rem] px-1 py-[.125rem] text-[.625rem] text-[#161A24]">
              {{
                {
                  '0': '未知',
                  '1': '男',
                  '2': '女'
                }[vk.getVuex('$user.userInfo.gender')]
              }}
            </view>
            <view
              class="bg-[#FFFFFF] rounded-[.25rem] px-1 py-[.125rem] text-[.625rem] text-[#161A24]"
              v-if="vk.getVuex('$user.userInfo.age')"
            >
              {{ `${vk.getVuex('$user.userInfo.age')}岁` }}
            </view>
            <view v-if="areat()" class="bg-[#FFFFFF] rounded-[.25rem] px-1 py-[.125rem] text-[.625rem] text-[#161A24]">
              {{ areat() }}
            </view>
          </view>
        </view>
        <!-- 达人入驻   我的钱包 -->
        <view class="grid grid-cols-2 gap-3">
          <view class="col-span-1 bg-[#FFFFFF] rounded-[.5rem] flex flex-col gap-1 px-4 py-2" @click="settled">
            <view class="text-[.8125rem] text-[#161A24] font-bold"> 达人入驻 </view>

            <!-- 未入驻 -->
            <view class="text-[.6875rem] text-[#8E9299]" v-if="entryStatus == -1"> 发布钓点赚收益 </view>
            <!-- 审核中 -->
            <view class="flex gap-1 items-center" v-if="entryStatus == 0">
              <image src="/static/dddr95.png" class="size-3 rounded-full" mode="aspectFill" />
              <view class="text-[.6875rem] text-[#8E9299]"> 入驻申请正在审核中 </view>
            </view>
            <!-- 审核未通过 -->
            <view class="flex gap-1 items-center" v-if="entryStatus == 2">
              <image src="/static/dddr96.png" class="size-3 rounded-full" mode="aspectFill" />

              <view class="text-[.6875rem] text-[#8E9299]"> 入驻申请审核(未通过)</view>
            </view>
            <!-- 审核成功 -->
            <view class="flex gap-1 items-center" v-if="entryStatus == 1">
              <!-- <view class="size-3 bg-green-600 rounded-full"> </view> -->
              <view class="text-[.6875rem] text-[#8E9299]"> 发布钓点赚收益 </view>
            </view>
          </view>
          <view
            class="col-span-1 bg-[#FFFFFF] rounded-[.5rem] flex flex-col gap-1 px-4 py-2"
            @click="vk.navigateTo('/pages/my/wallet')"
          >
            <view class="text-[.8125rem] text-[#161A24] font-bold"> 我的钱包 </view>
            <view class="text-[.6875rem] text-[#8E9299]"> 钓点收益都在这里 </view>
          </view>
        </view>
      </view>
      <view class="rounded-t-[1rem] from-white p-4 to-[#F4F6F8] bg-gradient-to-b flex flex-col gap-3">
        <view class="flex gap-6 items-center">
          <view
            v-for="(i, k) in list"
            class="flex flex-col gap-1 justify-start items-center"
            :key="k"
            @click="switchCategories(k)"
          >
            <text class="text-[1rem]" :class="current === k ? 'font-bold text-[#0d111a]' : ' text-[#8E9299]'">
              {{ i }}
            </text>
            <image src="/static/dddr74.png" v-if="current === k" class="w-[1.125rem] h-[.25rem]" mode="aspectFill" />
            <view v-else class="w-[1.125rem] h-[.25rem]"></view>
          </view>
        </view>
        <!-- 草稿箱 -->
        <view
          v-if="current == 0 && draft_num > 0"
          class="bg-[#E7F4F7] rounded-[.5rem] flex justify-between items-center px-4 py-2.5"
          @click="vk.navigateTo('/pages/my/draft')"
        >
          <view class="flex gap-1 items-center">
            <image src="/static/dddr49.png" class="size-4" mode="aspectFill" />
            <view class="flex gap-2 items-center">
              <view class="text-[.75rem] text-[#161A24] font-bold"> 草稿箱 </view>
              <view class="h-[.5rem] border-solid border-[#A5A9B0] border-l-[.0625rem]"></view>
              <view class="text-[.75rem] text-[#8E9299]"> {{ draft_num }}</view>
            </view>
          </view>
          <image src="/static/dddr58.png" mode="aspectFill" class="size-3" />
        </view>
        <template v-if="current == 0">
          <view class="flex flex-col gap-3">
            <view
              class="bg-white shadow-[0rem_.125rem_1.5rem_0rem_rgba(12,27,76,0.04)] rounded-[.75rem] p-4 flex flex-col gap-3"
              v-for="(i, k) in dataList"
              :key="k"
              @click="jumpDetails(i)"
            >
              <view class="flex gap-2">
                <view class="size-[5rem] flex-none relative">
                  <u-image
                    :src="vk.myfn.handleImageUrl(i.thumb)"
                    mode="aspectFill"
                    borderRadius=".5rem"
                    class="!size-full"
                  />
                  <image
                    v-if="i.is_paid_spot == 1 && i.is_paid == 0"
                    src="/static/dddr87.png"
                    class="h-[1.0625rem] absolute -left-[.125rem] -top-[0]"
                    mode="heightFix"
                  />
                  <image
                    v-if="i.is_paid_spot == 1 && i.is_paid == 1"
                    src="/static/dddr86.png"
                    class="h-[1.0625rem] absolute -left-[.125rem] -top-[0]"
                    mode="heightFix"
                  />
                </view>
                <view class="flex flex-col flex-1 justify-between">
                  <view class="flex justify-between items-center">
                    <view class="text-[1rem] text-[#161A24] font-bold line-clamp-1">{{ i.name }} </view>
                    <image src="/static/dddr85.png" class="h-[1rem]" v-if="i.basan_type == 1" mode="heightFix" />
                    <image src="/static/dddr83.png" class="h-[1rem]" v-if="i.basan_type == 2" mode="heightFix" />
                  </view>
                  <view class="flex justify-between items-center">
                    <view class="flex gap-3 items-baseline">
                      <view
                        class="text-[1.125rem] text-[#00A9AB] font-bold after:content-['钻'] after:text-[.75rem]"
                        v-if="Math.floor(i.paid_amount)"
                      >
                        {{ Math.floor(i.paid_amount) }}
                      </view>
                      <view class="text-[.75rem] text-[#8E9299]" v-else> 免费钓点</view>
                      <view class="text-[.75rem] text-[#8E9299]"> 评价{{ i.total_comment }} </view>
                    </view>
                    <view class="flex relative justify-end">
                      <view
                        class="bg-gradient-to-r from-[#FFBF3A]/30 to-white h-[.375rem] w-[115%] absolute rounded-[.1875rem] bottom-1 z-20"
                      >
                      </view>
                      <view class="flex relative z-20 items-baseline gap-[0.0625rem]">
                        <text class="font-[oxanium] text-[1.125rem] text-[#002021] font-bold">{{
                          (i.score || 0).toFixed(1)
                        }}</text>
                        <text class="text-[.625rem] text-[#002021]">分</text>
                      </view>
                    </view>
                  </view>
                  <view class="flex gap-1 items-center">
                    <image src="/static/dddr17.png" class="size-3" mode="aspectFill" />
                    <view class="text-[.6875rem] text-[#8E9299] line-clamp-1"> {{ i.address }} </view>
                  </view>
                </view>
              </view>
              <u-line></u-line>
              <view class="flex justify-between items-center">
                <view class="text-[.75rem] text-[#5C6068]"> {{ vk.myfn.getTimeAgo(i.create_time) }}发布 </view>
                <view
                  class="bg-[#F2F5F7] rounded-[.375rem] flex items-center py-1 px-2"
                  @click.stop="vk.navigateTo(`/pages/my/soldList?id=${i.id}`)"
                  v-if="i.is_paid_spot"
                >
                  <view class="text-[.75rem] text-[#5C6068]"> 已售{{ i.sold_count }} </view>
                  <image src="/static/dddr58.png" mode="aspectFill" class="size-3" />
                </view>
              </view>
            </view>
          </view>
        </template>
        <template v-if="current == 1 || current == 2">
          <view class="flex flex-col gap-3">
            <view
              v-for="(i, k) in dataList"
              :key="k"
              class="flex gap-2 bg-white shadow-[0rem_.125rem_1.5rem_0rem_rgba(12,27,76,0.04)] p-4 pb-2 rounded-[.75rem] flex-col"
              @click="vk.navigateTo('/pages/index/details?id=' + i.id)"
            >
              <view class="flex gap-2 items-center h-[7.3125rem]">
                <view class="w-[5.5rem] flex-none relative h-full">
                  <u-image
                    :src="vk.myfn.handleImageUrl(i.thumb)"
                    borderRadius=".5rem"
                    mode="aspectFill"
                    class="!size-full"
                  />

                  <image
                    v-if="i.is_paid_spot == 1 && i.is_paid == 0"
                    src="/static/dddr87.png"
                    class="h-[1.0625rem] absolute -left-[.1875rem] -top-0"
                    mode="heightFix"
                  />
                  <image
                    v-if="i.is_paid_spot == 1 && i.is_paid == 1"
                    src="/static/dddr86.png"
                    class="h-[1.0625rem] absolute -left-[.1875rem] -top-0"
                    mode="heightFix"
                  />
                  <view class="size-full flex absolute inset-0 flex-col flex-grow justify-between p-1">
                    <view></view>
                    <view class="flex justify-between items-center">
                      <view
                        v-for="(img, imgIndex) in i?.images.slice(0, 3)"
                        :key="imgIndex"
                        class="relative"
                        :class="imgIndex > 0 ? '-ml-3' : ''"
                      >
                        <view
                          class="size-[1.5rem] rounded-[.3125rem] border relative z-[1] overflow-hidden"
                          :style="`z-index: ${3 - imgIndex};`"
                        >
                          <u-image :src="img" class="!size-full" mode="aspectFill" />
                        </view>
                      </view>
                      <view class="text-[.875rem] text-transparent ml-1">+{{ i?.images.length }}</view>
                    </view>
                  </view>
                </view>
                <view class="flex flex-col justify-between w-full h-full">
                  <view class="flex justify-between items-center">
                    <view class="text-[1rem] text-[#161A24] font-bold line-clamp-1">{{ i.name }}</view>

                    <view class="px-[.4375rem] py-[.1875rem] rounded-full bg-[#F2F5F7]" v-if="i.distance">
                      <view class="text-[.625rem] text-[#5C6068] font-bold">
                        {{ i.distance }}
                      </view>
                    </view>
                  </view>
                  <view class="text-[.8125rem] text-[#5C6068] line-clamp-1"> {{ i.description }} </view>
                  <view class="flex flex-wrap gap-1 items-center">
                    <view
                      v-for="(i, k) in i?.ext?.fish_species || []"
                      :key="k"
                      class="px-[.375rem] py-[.0625rem] bg-[#F2F5F7] rounded-[.25rem]"
                    >
                      <view class="text-[.625rem] text-[#5C6068]"> {{ i.name }} </view>
                    </view>
                  </view>
                  <view class="flex justify-between items-center">
                    <view class="flex items-center text-[.6875rem] text-[#5C6068] gap-1">
                      <view class="flex items-center">
                        <image
                          :src="vk.myfn.handleImageUrl(i.weather?.lives?.[0]?.item)"
                          mode="aspectFill"
                          class="!size-[.875rem]"
                        />
                        <text class="ml-[.125rem]">{{ i.weather?.lives?.[0]?.weather || '未知天气' }}</text>
                      </view>
                      <text class="h-[.5rem] border-l border-solid border-[#C1C4C9]"></text>
                      <text>{{ i.weather.lives[0].temperature }}°C</text>
                      <text class="h-[.5rem] border-l border-solid border-[#C1C4C9]"></text>
                      <text>{{ i.weather?.lives[0]?.district || '未知区域' }}</text>
                    </view>
                    <view class="flex relative justify-end">
                      <view
                        class="bg-gradient-to-r from-[#FFBF3A]/30 to-white h-[.375rem] w-[115%] absolute rounded-[.1875rem] bottom-1 z-20"
                      >
                      </view>
                      <view class="flex relative z-20 items-baseline gap-[0.0625rem]">
                        <text class="font-[oxanium] text-[1.125rem] text-[#002021] font-bold">{{
                          (i.score || 0).toFixed(1)
                        }}</text>
                        <text class="text-[.625rem] text-[#002021]">分</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <u-line />

              <!-- 免费 -->
              <!-- 免费 -->
              <view class="flex justify-between items-center" v-if="!i?.is_paid_spot || i?.is_paid">
                <view class="flex gap-1 items-center">
                  <image src="/static/dddr17.png" class="size-4" mode="aspectFill" />
                  <view class="text-[.6875rem] text-[#5C6068]">{{ i.location_name }}</view>
                </view>
                <image src="/static/dddr47.png" class="size-7" mode="aspectFill" />
              </view>
              <!-- 购买 -->
              <view class="flex justify-between items-center" v-if="i.is_paid_spot && !i.is_paid">
                <view class="flex gap-1 items-center">
                  <view class="flex items-center">
                    <view
                      class="size-5 flex overflow-hidden justify-center items-center -ml-2 bg-gray-200 rounded-full border"
                      :style="`z-index: ${5 - k};`"
                      v-for="(i, k) in i.purchased_users.slice(0, 3)"
                      :key="k"
                    >
                      <image
                        :src="i.avatar ? vk.myfn.handleImageUrl(i.avatar) : '/static/dddr103.png'"
                        class="size-full"
                        mode="aspectFill"
                      />
                    </view>
                  </view>
                  <view class="text-[.6875rem] text-[#00A9AB]" v-if="i.sold_count"
                    >{{ i.sold_count }}人已解锁该钓点</view
                  >
                  <view class="flex gap-1 items-center" v-else>
                    <image src="/static/dddr131.png" mode="aspectFill" class="size-4" />
                    <view class="text-[.6875rem] text-[#00A9AB]">解锁此钓点查看视频指路</view>
                  </view>
                </view>
                <yy-amountBtn :paid_amount="i.paid_amount"></yy-amountBtn>
              </view>
            </view>
          </view>
        </template>
      </view>
      <template #bottom>
        <view class="pb-env bg-white">
          <yy-tabbar :tabbarIndex="tabbarIndex"></yy-tabbar>
        </view>
      </template>
    </yy-paging>

    <!-- 审核中 -->
    <yy-reviewFailed :show="showReviewFailed" @update:show="showReviewFailed = $event"></yy-reviewFailed>
    <!-- 审核失败 -->
    <yy-auditFailed
      :show="showAuditFailed"
      @update:show="showAuditFailed = $event"
      @resubmit="resubmit"
    ></yy-auditFailed>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabbarIndex: 2, // 底部导航栏当前选中索引
        isScroll: false, // 页面是否滚动状态
        automatic: false, // 自动操作标识
        list: ['钓点', '收藏', '已购'], // 顶部选项卡列表
        current: 0, // 当前选中的选项卡索引
        entryStatus: '', // 入驻状态
        dataList: [], // 数据列表
        showReviewFailed: false, // 审核中状态显示
        showAuditFailed: false, // 审核失败状态显示
        draft_num: 0, // 草稿数量
        unread_num: 0
      }
    },
    // onPageScroll(e) {
    //   console.log('e.scrollTop==> ', e.scrollTop)
    //   this.isScroll = e.scrollTop > 0
    // },
    onShow() {
      uni.hideTabBar()

      this.joinDarenStatus()
      this.getDraftTotal()
      setTimeout(() => {
        // vk.pubfn.checkLogin()
        // 检测是否需要登录
        this.$refs.paging.refresh()
      }, 0)
    },
    onUnload() {
      // 页面隐藏时清除监听器
      // uni.$off('returnUpdatedData')
    },
    onLoad(options) {},

    methods: {
      jumpDetails(i) {
        vk.navigateTo({
          url: `/pages/index/details?id=${i.id}`,
          events: {
            update: data => {
              this.$refs.paging.refresh()
            }
          }
        })
      },
      refreshData() {
        this.$refs.paging.refresh()
      },
      previewPictures(e) {
        uni.previewImage({
          urls: [e]
        })
      },
      goNotify() {
        vk.navigateTo({
          url: '/pages/my/notice'
        })
      },
      onRefresh() {
        this.joinDarenStatus()
        this.getDraftTotal()
      },
      async getDraftTotal() {
        let res = await api.getDraftTotal()
        if (!res.code) return
        this.draft_num = res.data.draft_num
        this.unread_num = res.unread_num
      },
      resubmit() {
        vk.navigateTo({
          url: '/pages/my/settled'
        })
      },
      settled() {
        // -1=未申请,0=待审核,1=通过,2=拒绝
        const STATUS_MAP = {
          '-1': () =>
            vk.navigateTo({
              url: '/pages/my/settled'
            }),
          0: () => (this.showReviewFailed = true),
          1: () =>
            vk.navigateTo({
              url: '/pages/my/successfullySettledIn'
            }),
          2: () => (this.showAuditFailed = true)
        }

        const handler = STATUS_MAP[this.entryStatus]
        if (handler) {
          handler()
        }
      },
      async joinDarenStatus() {
        if (vk.getVuex('$user.userInfo')) {
          vk.vuex.dispatch('$user/getUserInfo')
        }
        let res = await api.joinDarenStatus()
        this.entryStatus = res.data.status
      },
      areat() {
        const userInfo = vk.getVuex('$user.userInfo')
        // 如果省市相同则只显示一个,不同则用-连接
        if (userInfo.province && userInfo.city) {
          return userInfo.province === userInfo.city ? userInfo.province : `${userInfo.province}-${userInfo.city}`
        }
        return ''
      },

      isItEmpty() {
        const userInfo = vk.getVuex('$user.userInfo')
        const hasNoArea = !!(userInfo.province && userInfo.city)
        const hasAge = !!userInfo.age
        const hasGender = userInfo.gender == '1' || userInfo.gender == '2'
        return hasNoArea || hasAge || hasGender
      },
      switchCategories(e) {
        this.selectedTags = []
        this.current = e
        vk.showLoading('加载中...')

        this.$refs.paging.reload()
      },
      shareApp() {
        vk.myfn.shareWithSystem()
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 55
      },
      change(e) {
        this.current = e
        this.$refs.paging.reload()
      },
      async queryList(page, limit) {
        const userId = vk.vuex.get('$user.userInfo.id')
        const position = vk.getVuex('$user.positioning')
        // 如果position为空则使用默认经纬度

        let response

        switch (this.current) {
          case 0:
            response = await api.getBasanList({
              // page,
              // limit,
              user_id: userId
            })
            break
          case 1:
            response = await api.collectList({
              // page,
              // limit,
              lat: position?.lat || '',
              lng: position?.lng || ''
            })
            break
          case 2:
            response = await api.getBoughtList({
              // page,
              // limit,
              lat: position?.lat || '',
              lng: position?.lng || ''
            })
            break
          default:
            return
        }
        if (!response?.code) {
          return
        }
        vk.hideLoading()
        this.$refs.paging.setLocalPaging(response.data)
      }
    }
  }
</script>

<style lang="scss" scoped>
  html,
  .backgroundImage,
  page {
    background-image: url('/static/dddr65.png') !important;
    background-repeat: no-repeat !important;
    background-size: 100% !important;
    background-position: top !important;
    background-color: #f4f6f8 !important;
  }
</style>
